<template>
  <div>
    <el-radio-group v-model="key" size="large">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
  </div>
  <!-- 画饼图 -->
  <div id="pie" ref="pie" style="height: 400px;"></div>
</template>
  
<script setup lang='ts'>
// 导入
import * as Echarts from 'echarts'
import { onMounted, ref, watch } from 'vue';
type EChartsOption = echarts.EChartsOption
const props = defineProps<{ data: SalePie[] }>()
const pie = ref<HTMLDivElement | null>(null)

const key = ref('sale_')

let option: EChartsOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    right: '20%',
    orient: 'vertical',
    height: 100,
  },
  series: [
    {
      right: '30%',
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [],
    }
  ]
};
let myChart: Echarts.ECharts;
onMounted(() => {
  if (pie.value) {
    myChart = Echarts.init(pie.value);
  }
})
watch(() => props.data.length, () => {
  const data = props.data.map(item => ({
    name: item.name,
    value: item.sale_fourteen_days
  }))
  // @ts-ignore
  option.series[0].data = data;
  myChart.setOption(option);
})

const day = ref('seven_days');
watch([key, day], () => {
  const name = key.value == 'sale_' ? key.value + day.value : day.value + key.value;
  const data = props.data.map(item => ({
    name: item.name,
    // @ts-ignore
    value: item[name]
  }));
  (option.series as any[])[0].data = data as any;
  myChart.setOption(option);
})

</script>
  
<style></style>